<template>
  <div>
    <div class="swiper-contaienr hidden-xs-only">
      <div class="swiper-content">
        <div class="swiper-title">
          <p>Intelligence、Science、Stability</p>
          <!-- <p>Safe legal and compliant</p> -->
        </div>
        <div class="content">Transaction solutions</div>
      </div>
      <div style="width: 80%">
        <div class="contactBtn">Contact Us</div>
      </div>
    </div>
    <div class="swiper-contaienr2 hidden-sm-and-up">
      <div class="swiper-content">
        <div class="swiper-title">
          <p>The History of AI Quantitative Trading</p>
          <!-- <p>Safe legal and compliant</p> -->
        </div>
        <div class="content">Transaction solutions</div>
      </div>
      <div style="width: 80%">
        <div class="contactBtn">Contact Us</div>
      </div>
    </div>
    <div class="pg1">
      <div class="pg1-body">
        <span style="color: #c30d23">AI</span>&nbsp;intelligence advantages
      </div>
    </div>
    <div class="sixItem hidden-xs-only">
      <div class="sixItem-body">
        <div class="top-item">
          <div class="item">
            <div>
              <img src="../static/images/PC/3/2.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Efficiency</div>
            <div class="item-content">
              AI quantitative trading utilizes machine learning and bigdata
              analysis techniques to quickly and accurately analyze market data
              and patternsfor decision-making. Compared to traditional manual
              trading, AI can monitor the market in real-time and respond
              quickly, thereby reducing transaction costs and risks.
            </div>
          </div>
          <div class="item">
            <div>
              <img src="../static/images/PC/3/3.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Scientificity</div>
            <div class="item-content">
              AI quantitative trading is based on rigorous data analysis and
              statistical models, following facts and rules without being
              influenced by emotions and subjective factors. This makes trading
              decisions more rational and predictable, and can avoid the risk of
              human misjudgment and market fluctuations.
            </div>
          </div>

          <div class="item">
            <div>
              <img src="../static/images/PC/3/4.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Diversity</div>
            <div class="item-content">
              AI quantitative trading can simultaneously monitor and trade
              multiple markets, asset classes, and trading strategies. This
              diversity makes investment portfolios more balanced and
              diversified, reducing the risk of a single market or asset.
            </div>
          </div>
        </div>
        <div class="top-item">
          <div class="item">
            <div>
              <img src="../static/images/PC/3/5.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Automation</div>
            <div class="item-content">
              AI quantitative trading can automatically execute trading
              strategies without the need for manual intervention.This
              automation can reduce human errors and delays, improve the
              efficiency and accuracy of transaction execution.
            </div>
          </div>
          <div class="item">
            <div>
              <img src="../static/images/PC/3/6.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Traceability</div>
            <div class="item-content">
              AI quantitative trading can provide detailed recording and
              retrospective analysis of trading decisions and execution
              processes. This traceability makes the trading process more
              transparent and verifiable, enabling reflection and improvement of
              trading strategies.
            </div>
          </div>

          <div class="item">
            <div>
              <img src="../static/images/PC/3/7.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Real time monitoring</div>
            <div class="item-content">
              AI quantitative trading can monitor market conditions in real time
              and trade based on preset rules and indicators. This real-time
              monitoring can timely detect and utilize market opportunities,
              reducing the risk of missing trading opportunities.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="sixItem2 hidden-sm-and-up">
      <div class="sixItem-body">

          <div class="item">
            <div>
              <img src="../static/images/PC/3/2.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Efficiency</div>
            <div class="item-content">
              AI quantitative trading utilizes machine learning and bigdata
              analysis techniques to quickly and accurately analyze market data
              and patternsfor decision-making. Compared to traditional manual
              trading, AI can monitor the market in real-time and respond
              quickly, thereby reducing transaction costs and risks.
            </div>
          </div>
          <div class="item">
            <div>
              <img src="../static/images/PC/3/3.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Scientificity</div>
            <div class="item-content">
              AI quantitative trading is based on rigorous data analysis and
              statistical models, following facts and rules without being
              influenced by emotions and subjective factors. This makes trading
              decisions more rational and predictable, and can avoid the risk of
              human misjudgment and market fluctuations.
            </div>
          </div>

          <div class="item">
            <div>
              <img src="../static/images/PC/3/4.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Diversity</div>
            <div class="item-content">
              AI quantitative trading can simultaneously monitor and trade
              multiple markets, asset classes, and trading strategies. This
              diversity makes investment portfolios more balanced and
              diversified, reducing the risk of a single market or asset.
            </div>
          </div>
          <div class="item">
            <div>
              <img src="../static/images/PC/3/5.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Automation</div>
            <div class="item-content">
              AI quantitative trading can automatically execute trading
              strategies without the need for manual intervention.This
              automation can reduce human errors and delays, improve the
              efficiency and accuracy of transaction execution.
            </div>
          </div>
          <div class="item">
            <div>
              <img src="../static/images/PC/3/6.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Traceability</div>
            <div class="item-content">
              AI quantitative trading can provide detailed recording and
              retrospective analysis of trading decisions and execution
              processes. This traceability makes the trading process more
              transparent and verifiable, enabling reflection and improvement of
              trading strategies.
            </div>
          </div>

          <div class="item">
            <div>
              <img src="../static/images/PC/3/7.png" alt="" class="item-logo" />
            </div>
            <div class="item-title">Real time monitoring</div>
            <div class="item-content">
              AI quantitative trading can monitor market conditions in real time
              and trade based on preset rules and indicators. This real-time
              monitoring can timely detect and utilize market opportunities,
              reducing the risk of missing trading opportunities.
            </div>
          </div>

      </div>
    </div>




    <div class="pg1" style="margin-bottom: 80px">
      <div class="pg1-body">
        More <span style="color: #c30d23">stable</span>,
        <span style="color: #c30d23">secure</span>, and
        <span style="color: #c30d23">promising</span>
      </div>
    </div>


    <div class="pg2 hidden-xs-only">
      <div class="pg2-container">
        <div class="text-intro">
          <div class="text-title">OUR mission</div>
          <div class="text-content">
            The mission of KODDPA is to create value for customers and become
            their trusted partners. We will continue to strive to improve our
            professional skills and service level, provide customers with the
            best trading experience, and work together with them to achieve
            common success.
          </div>
          <div class="text-content">
            KODDPA is committed to ensuring the financial security of our
            clients as our top priority. To achieve this goal, we strictly
            adhere to financial regulatory standards and adopt a series of
            state-of-the-art security technologies and protective measures to
            protect customer transaction information and funds.
          </div>
        </div>
        <div>
          <img src="../static/images/PC/3/8.jpeg" alt="" class="pg2-image" />
        </div>
      </div>
    </div>

    <div class="pg2-1 hidden-sm-and-up">
      <div class="pg2-container">
      <div>
          <img src="../static/images/PC/3/8.jpeg" alt="" class="pg2-image" />
        </div>
        <div class="text-intro">
          <div class="text-title">OUR mission</div>
          <div class="text-content">
            The mission of KODDPA is to create value for customers and become
            their trusted partners. We will continue to strive to improve our
            professional skills and service level, provide customers with the
            best trading experience, and work together with them to achieve
            common success.
          </div>
          <div class="text-content">
            KODDPA is committed to ensuring the financial security of our
            clients as our top priority. To achieve this goal, we strictly
            adhere to financial regulatory standards and adopt a series of
            state-of-the-art security technologies and protective measures to
            protect customer transaction information and funds.
          </div>
        </div>
        
      </div>
    </div>
    <bottom />
  </div>
</template>

<script>
import bottom from "@/components/bottom.vue";

export default {
  name: "HomeView",
  components: {
    bottom,
  },
};
</script>

<style lang="scss" scoped>
.pg2-1 {
  display: flex;
  justify-content: center;
  .pg2-container {
    width: 90%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .pg2-image {
      width: 100%;
    }
    .text-intro {
      margin-top: 20px;
      padding: 10px;
      background-color: #fafafa;
      .text-title {
        font-size: 40px;
        color: #c30d23;
        margin-bottom: 20px;
        font-weight: 900;
      }
      .text-content {
        font-size: 14px;
        margin-bottom: 30px;
        color: #606166;
      }
    }
  }
}
.pg2 {
  display: flex;
  justify-content: flex-end;
  background-color: #fafafa;
  margin-bottom: 50px;
  .pg2-container {
    width: 90%;
    display: flex;
    align-items: center;
    .pg2-image {
      width: 100%;
    }
    .text-intro {
      margin-right: 30px;
      padding-top: 30px;
      width: 50%;
      .text-title {
        font-size: 40px;
        color: #c30d23;
        margin-bottom: 20px;
        font-weight: 900;
      }
      .text-content {
        font-size: 14px;
        margin-bottom: 30px;
        color: #606166;
      }
    }
  }
}
.sixItem2 {
  display: flex;
  align-items: center;
  justify-content: center;
  .sixItem-body {
    width: 95%;
    .top-item {
      display: flex;
      align-items: center;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-right: 10px;
      margin-bottom: 10px;
      width: 100%;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      padding-bottom: 30px;
      .item-logo {
        margin-top: 50px;
      }
      .item-title {
        font-weight: 900;
        font-size: 28px;
        margin-top: 50px;
        margin-bottom: 20px;
      }
      .item-content {
        width: 85%;
        font-size: 14px;
      }
    }
    .item:hover {
      box-shadow: 0px 10px 20px 0px rgba(170, 170, 170, 0.1608);
    }
  }
}
.sixItem {
  display: flex;
  align-items: center;
  justify-content: center;
  .sixItem-body {
    width: 80%;
    .top-item {
      display: flex;
      align-items: center;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-right: 10px;
      margin-bottom: 10px;
      width: 32%;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      padding-bottom: 30px;
      .item-logo {
        margin-top: 50px;
      }
      .item-title {
        font-weight: 900;
        font-size: 28px;
        margin-top: 50px;
        margin-bottom: 20px;
      }
      .item-content {
        width: 85%;
        font-size: 14px;
      }
    }
    .item:hover {
      box-shadow: 0px 10px 20px 0px rgba(170, 170, 170, 0.1608);
    }
  }
}
.pg1 {
  display: flex;
  align-items: center;
  justify-content: center;
  .pg1-body {
    font-size: 50px;
    font-weight: 900;
    width: 80%;
    text-align: center;
  }

  margin-top: 53px;
  .pg1-body-image {
    width: 80%;
    .pg1-image1 {
      width: 80%;
    }
  }
}
.swiper-contaienr2 {
  padding: 100px 0px 100px 0;
  background-image: url("../static/images/iphone/3/1.jpeg");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  flex-direction: column;
  .swiper-content {
    color: #fff;
    width: 80%;
    .swiper-title {
      font-weight: 900;
      font-size: 50px;
    }
    .content {
      opacity: 0.8;
      font-weight: 500;
      margin-top: 20px;
      font-size: 16px;
    }
  }
  .contactBtn {
    color: #fff;
    background-color: #c30d23;
    margin-top: 20px;
    font-weight: 700;
    width: 161px;
    border-radius: 4px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.swiper-contaienr {
  padding: 200px 0px 200px 0;
  background-image: url("../static/images/PC/3/1.jpeg");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  flex-direction: column;
  .swiper-content {
    color: #fff;
    width: 80%;
    .swiper-title {
      font-weight: 900;
      font-size: 50px;
    }
    .content {
      opacity: 0.8;
      font-weight: 500;
      margin-top: 20px;
      font-size: 32px;
    }
  }
  .contactBtn {
    color: #fff;
    background-color: #c30d23;
    margin-top: 20px;
    font-weight: 700;
    width: 161px;
    border-radius: 4px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 760px) {
  .swiper-content {
    width: 93% !important;
  }
  .swiper-title {
    font-size: 28px !important;
  }
  .pg1-body{
    font-size: 28px !important;
  }
}
</style>